<template>
	<view class="wrap">
		<view class="form">
			<u-form :model="form" label-position="top">
				<u-form-item label="手机号">
					<u-input v-model="form.name" placeholder="请输入手机号" />
				</u-form-item>
				<view class="divider"></view>
				<u-form-item label="验证码">
					<u-input v-model="form.code" placeholder="请输入手机验证码" />
					<view class="getCode" slot="right" @click="getCode">{{isCountDown ? `${time}s` : '获取验证码'}}
					</view>
				</u-form-item>
				<view class="divider"></view>
				<u-form-item label="设置密码">
					<u-input v-model="form.password" type="password" placeholder="请输入登录密码" />
				</u-form-item>
				<view class="divider"></view>
				<u-form-item label="确认密码">
					<u-input v-model="form.comfimrPassword" type="password" placeholder="请再次输入密码确认" />
				</u-form-item>
				<view class="btn" @click="onConfirmTap">确定</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	let timer = null
	export default {
		data() {
			return {
				form: {
					name: '',
					code: '',
					password: '',
					comfimrPassword: '',
				},
				isCountDown: false,
				time: 60
			}
		},
		onLoad(options) {

		},
		methods: {
			getCode() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
					})
					return
				}
				if (!this.$verificationPhone.test(this.form.name)) {
					uni.showToast({
						title: '请输入正确手机号码',
						icon: 'none',
					})
					return
				}
				this.countDown()
				this.$g_api.commonSendCode({
					tel: this.form.name
				}).then(({
					data
				}) => {
					this.countDown()
				})
			},
			countDown() {
				this.isCountDown = true
				clearInterval(timer)
				timer = setInterval(() => {
					if (--this.time == 0) {
						this.isCountDown = false
						this.time = 60
						clearInterval(timer)
					}
				}, 1000)
			},
			onConfirmTap() {
				let params = this.checkParams()
				if (!params) return
				this.$g_api.subscriberForgot(params).then(({
					data
				}) => {
					uni.showToast({
						title: '修改成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
			},
			checkParams() {
				let msg = ''
				if (!this.form.name) {
					msg = '请输入手机号'
				} else if (!this.form.code) {
					msg = '请输入验证码'
				} else if (!this.form.password) {
					msg = '请设置密码'
				} else if (!this.form.comfimrPassword) {
					msg = '请确认密码'
				} else if (this.form.password !== this.form.comfimrPassword) {
					msg = '两次密码不一致'
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: 'none',
					})
					return false
				}
				return {
					checkNum: this.form.code,
					newPassword: this.form.password,
					resPassword: this.form.comfimrPassword,
					tel: this.form.name,
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-form-item {
		padding: 0 !important;
	}

	/deep/ .u-input__input {
		height: 88rpx;
	}

	/deep/ .u-form-item--left__content__label {
		height: 30rpx;
	}

	/deep/ .u-border-bottom {
		&::after {
			border-bottom: 2px solid #e6e6e6;
		}
	}

	/deep/ .u-form-item--left {
		margin-bottom: 0 !important;
	}

	.wrap {
		padding: 30rpx 40rpx 0;
	}

	.header {
		margin-bottom: 98rpx;
	}

	.header-title {
		margin-bottom: 30rpx;
		font-size: 48rpx;
		line-height: 50rpx;
		margin-bottom: 28rpx;
		font-weight: bold;
	}

	.header-desc {
		text {
			&:first-child {
				color: #999;
			}

			&:nth-child(2) {
				margin-left: 6rpx;
				font-weight: bold;
				color: #3377FF;
			}
		}
	}

	.form {}

	.divider {
		height: 40rpx;
	}

	.getCode {
		color: $g-main-color;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		font-size: 24rpx;

		text {
			&:nth-of-type(1) {
				margin-left: 10rpx;
			}

			&:nth-of-type(2) {
				color: #3377FF;
			}
		}
	}

	.btn {
		width: 610rpx;
		margin: 100rpx auto 0;
		height: 90rpx;
		line-height: 90rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #80AAFF, #B2CCFF);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(128, 170, 255, 0.5);
		border-radius: 46rpx;
	}
</style>
